<!-- 楼层管理 -->
<template>
  <div class="app-container">
    <TopMenu :data-list="topDataLabel" @tabsChange="tabsChange"/>
    <div class="main-info-container">
      <!-- 查询结果 -->
      <el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" stripe border el-table-column fit highlight-current-row @cell-mouse-enter="hoverTable">
        <el-table-column align="center" label="楼层名" prop="name">
          <template slot-scope="scope">
            <div v-show="scope.row.floorNameEdit===2" @mouseover="floorFnOver(scope.$index, 'floorNameEdit')">
              <span>{{ scope.row.name }}</span>
            </div>
            <div v-show="scope.row.floorNameEdit===0" @mouseout="floorFnOut(scope.$index, 'floorNameEdit')">
              <span>{{ scope.row.name }}</span>
              <a href="javascript:void(0);" class="table-btn" @click="editFloorName(scope.$index)">【修改】</a>
            </div>
            <div v-show="scope.row.floorNameEdit===1">
              <el-input v-model="scope.row.name" clearable autocomplete="off" style="width:100px;display: block;margin: 0 auto;"/>
              <a href="javascript:void(0);" class="table-btn" @click="enterFloorName(scope.row, scope.$index)">【确定】</a>
              <a href="javascript:void(0);" class="table-btn" @click="floorEnterFnOut(scope.$index, 'floorNameEdit')">【取消】</a>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="地上/地下" prop="is_above"/>
        <el-table-column align="center" label="层高 (m)" prop="floor_height">
          <template slot-scope="scope">
            <div v-show="scope.row.floorHeightEdit===2" @mouseover="floorFnOver(scope.$index, 'floorHeightEdit')">
              <span v-if="scope.row.floorHeightEdit">{{ scope.row.floor_height }}m</span>
            </div>
            <div v-show="scope.row.floorHeightEdit===0" @mouseout="floorFnOut(scope.$index, 'floorHeightEdit')">
              <span>{{ scope.row.floor_height }}m</span>
              <a href="javascript:void(0);" class="table-btn" @click="editFloorHeight(scope.$index)">【修改】</a>
            </div>
            <div v-show="scope.row.floorHeightEdit===1">
              <el-input-number v-model="scope.row.floor_height" :precision="2" :step="0.1" size="mini" style="width: 140px;"/>
              <a href="javascript:void(0);" class="table-btn" @click="enterFloorHeight(scope.row, scope.$index)">【确定】</a>
              <a href="javascript:void(0);" class="table-btn" @click="floorEnterFnOut(scope.$index, 'floorHeightEdit')">【取消】</a>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="平面图" width="150">
          <template slot-scope="scope">
            <div style="text-align: left;">
              <!-- <el-upload
                :limit="1"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :show-file-list="false"
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/">
              </el-upload> -->
              <a href="javascript:void(0);" class="table-btn" @click="uploadBtn(scope.$index)">【上传】</a>
              <input id="upload" name="plan" type="file" accept="image/*" @change="upload">
              <a v-if="scope.row.plan" href="javascript:void(0);" class="table-btn" @click="lookBtn(scope.row, scope.$index)" >【查看】</a>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="绘制分区" prop="createdAt">
          <template slot-scope="scope">
            <a v-permission="['v1/fire-zones/draw']" href="javascript:void(0);" class="table-btn" @click="toPlotPartition(scope.row)">【绘制分区】</a>
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态" width="100" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <!-- 启用 -->
            <el-switch v-permission="['v1/floors/enable']" v-model="scope.row.is_forbidden" active-text="已启用" inactive-text="已停用" active-color="#109008" inactive-color="#828282" @click.native.prevent="iconQiyong(scope.$index, scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </div>
  </div>
</template>
<script>
import $ from 'jquery'
import { floorList, floorUpdate, buildList } from '@/api/park'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import TopMenu from '@/components/TopMenu' // 顶部菜单
import checkPermission from '@/utils/permission' // 权限判断函数

export default {
  name: 'Order',
  components: { Pagination, TopMenu },
  data() {
    return {
      topDataLabel: {
        data: [],
        selectName: ''
      },
      topDataList: [],
      list: [],
      total: 0,
      plan: '',
      listLoading: false,
      listQuery: {
        page: 1,
        offset: 8
      },
      topQuery: {
        page: 1,
        offset: 1000
      },
      dataList: {},
      index: ''
    }
  },
  computed: {
    // 计算属性
    getPageData() {
      return this.$route.params.buildData
    },
    getParkId() {
      return this.$route.params.park_id
    }
  },
  created() {
    if (!this.getPageData) {
      this.$router.push({
        name: 'parkManage'
      })
    } else {
      this.listQuery.building_id = this.getPageData.building_id
      this.topQuery.park_id = this.getParkId
      this.topDataLabel.selectName = this.getPageData.name
      this.getList()
      this.getTopList()
    }
  },
  methods: {
    // 列表查询getParkId
    checkPermission,
    getList() {
      this.listLoading = true
      const that = this
      floorList(this.listQuery)
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            that.list = []
            response.data.data.data.forEach(function(value, index, array) {
              array[index].is_forbidden = array[index].is_forbidden === 2
              array[index].floorNameEdit = 2
              array[index].floorHeightEdit = 2
              // console.log(array[index].plan)
              array[index].is_above = array[index].is_above === 1 ? '地上' : '地下'
              that.list.push(array[index])
            })
            that.total = parseInt(response.data.data.total_count)
          }
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    getTopList() {
      const that = this
      buildList(this.topQuery)
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            that.topDataLabel.data = []
            that.topDataList = []
            response.data.data.data.forEach(function(value, index, array) {
              that.topDataLabel.data.push(array[index].name)
              that.topDataList.push({
                name: array[index].name,
                id: array[index].building_id
              })
            })
          }
        })
        .catch(() => {
          that.topDataLabel.data = []
        })
    },
    // 查询
    hoverTable(row, column, cell, event) {
      // var index = $(cell).parent().index()
      // this.list[index].floorNameEdit = 0
      // this.list[index].floorHeightEdit = 0
    },
    // 启用/停用
    iconQiyong(index, data) {
      const is_forbidden = data.is_forbidden // 保存点击之后v-modeld的值(true，false)
      data.is_forbidden = !data.is_forbidden // 保持switch点击前的状态
      const that = this
      var flag = is_forbidden ? '启用' : '停用'
      this.$confirm('此操作将' + flag + '该行数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        var params = {
          corp_id: data.corp_id,
          park_id: data.park_id,
          building_id: data.building_id,
          floor_id: data.floor_id,
          is_forbidden: is_forbidden ? 2 : 1
        }
        floorUpdate(params)
          .then((res) => {
            const data = res.data
            if (data.code === 40000) {
              that.$message.success(data.message)
            } else {
              that.$message.warning(data.message)
            }
            that.getList()
          })
          .catch(() => {
            that.getList()
          })
      }).catch(() => {
        that.getList()
      })
    },
    floorFnOver(index, key) {
      this.list[index][key] = 0
    },
    floorFnOut(index, key) {
      if (this.list[index][key] !== 1) {
        this.list[index][key] = 2
      }
    },
    floorEnterFnOut(index, key) {
      this.list[index][key] = 2
      this.getList()
    },
    // 修改
    editFloorHeight(index) {
      this.list[index].floorHeightEdit = 1
    },
    // 确定
    enterFloorHeight(row, index) {
      const that = this
      if (row.floor_height === 0) {
        that.$message.warning('层高必须大于0！')
        return false
      }
      this.listLoading = true
      this.list[index].floorHeightEdit = 0
      var params = {
        corp_id: row.corp_id,
        park_id: row.park_id,
        building_id: row.building_id,
        floor_id: row.floor_id,
        floor_height: row.floor_height
      }
      floorUpdate(params)
        .then((res) => {
          const data = res.data
          if (data.code === 40000) {
            that.$message.success(data.message)
          } else {
            that.$message.warning(data.message)
          }
          that.getList()
          that.listLoading = false
        })
        .catch(() => {
          that.listLoading = false
          that.getList()
        })
    },
    // 修改
    editFloorName(index) {
      this.list[index].floorNameEdit = 1
    },
    // 确定
    enterFloorName(row, index) {
      const that = this
      if (row.name === '') {
        that.$message.warning('请输入楼层名！')
        return false
      }
      this.listLoading = true
      this.list[index].floorNameEdit = 0
      this.listLoading = false
      var params = {
        corp_id: row.corp_id,
        park_id: row.park_id,
        building_id: row.building_id,
        floor_id: row.floor_id,
        name: row.name
      }
      floorUpdate(params)
        .then((res) => {
          const data = res.data
          if (data.code === 40000) {
            that.$message.success(data.message)
          } else {
            that.$message.warning(data.message)
          }
          that.getList()
        })
        .catch(() => {
          that.getList()
        })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
        return isJPG
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return isLt2M
      }
    },
    uploadBtn(index) {
      $('#upload').click()
      this.index = index
    },
    upload(e) {
      var file = e.target.files[0]
      const isImage = e.target.files[0].type.substr(0, 5) === 'image'
      const that = this
      if (!isImage) {
        that.$message.warning('请上传图片格式!')
        return false
      }
      const image = new window.FormData()
      image.append('plan', file)
      image.append('corp_id', that.list[that.index].corp_id)
      image.append('park_id', that.list[that.index].park_id)
      image.append('building_id', that.list[that.index].building_id)
      var params = {
        floor_id: that.list[that.index].floor_id,
        fileType: 'file',
        data: image
      }
      floorUpdate(params)
        .then((res) => {
          const data = res.data
          if (data.code === 40000) {
            that.$message.success(data.message)
          } else {
            that.$message.warning(data.message)
          }
          that.getList()
        })
        .catch(() => {
          that.getList()
        })
    },
    lookBtn(row, index) {
      this.$alert('<img src="' + row.plan + '" style="width:100%;height:400px;"/>', '查看图片', {
        dangerouslyUseHTMLString: true
      }).catch((e) => {
        console.log(e)
      })
    },
    // 绘制分区
    toPlotPartition(row) {
      this.$router.push({
        name: 'plotPartition',
        params: {
          buildData: row
        }
      })
    },
    // 顶部切换监听
    tabsChange(data) {
      this.topDataList.forEach((item, index) => {
        if (item.name === data) {
          this.listQuery.building_id = item.id
          this.getList()
        }
      })
    },
    setTimeoutFn() {
      const that = this
      this.listLoading = true
      setTimeout(function() {
        that.listLoading = false
      }, 1000)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.upload-demo{
  width: 60px;
  display: inline-block;
}
#upload{
  display: none;
}
.table-btn{
  display: inline-block;
}
</style>
